<template>
	<view >
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="基础样式" label-width="350" >
				<template slot='header'>
					<g-switch v-model="visible"></g-switch>
				</template>
				<h5 style='color:#CFCFCF;'>试试点击右侧开关</h5>
				<g-mask :visible.sync="visible">
					<template slot='content'>
						<view style="width: 450rpx;height:450rpx; background: #ffffff;">
							基础样式
						</view>
					</template>
				</g-mask>
			</g-title-wrap>
		</view>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="模糊效果(blur)" label-width="350" >
				<template slot='header'>
					<g-switch v-model="visible2"></g-switch>
				</template>
				<h5 style='color:#CFCFCF;'>试试点击右侧开关</h5>
				<g-mask :visible.sync="visible2" blur >
					<template slot='content'>
						<view style="width: 450rpx;height: 450rpx; background: #ffffff;">
							模糊效果
						</view>
					</template>
				</g-mask>
			</g-title-wrap>
		</view>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="添加动画(animation)" label-width="350" >
				<template slot='header'>
					<g-switch v-model="visible3"></g-switch>
				</template>
				<h5 style='color:#CFCFCF;'>试试点击右侧开关</h5>
				<g-mask :visible.sync="visible3" blur animation>
					<template slot='content'>
						<view style="width: 450rpx;height: 450rpx; background: #ffffff;">
							模糊效果
						</view>
					</template>
				</g-mask>
			</g-title-wrap>
		</view>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="拓展插槽(slot-name:content)" label-width="550" >
				<template slot='header'>
					<g-switch v-model="visible4"></g-switch>
				</template>
				<h5 style='color:#CFCFCF;'>试试点击右侧开关</h5>
				<g-mask :visible.sync="visible4" blur animation>
					<template slot='content'>
						<view style="width: 450rpx;height: 450rpx; background: #ffffff;">
							我是插槽
						</view>
					</template>
				</g-mask>
			</g-title-wrap>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visible:false,
				visible2:false,
				visible3:false,
				visible4:false,
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
